<template>
	<view class="big-box">
		<!-- 顶部栏 -->
		<view class="top-box">
			<view class="top-box-title">
				购物车
				<view class="goods-num">
					(87)
				</view>
			</view>
			<view class="address">
				<view class="address-eye">
					<image class="address-eye-pic" src="../../static/pic/cart/eye.png" mode=""></image>
				</view>
				<view class="address-info">
					重庆市江北区观...
					<view class="address-info-more">
						>
					</view>
				</view>
			</view>
			<view class="top-box-tool">
				<view class="top-box-tool-search">
					<image class="top-box-tool-search-pic" src="../../static/pic/cart/search.png" mode=""></image>
				</view>
				<view class="top-box-tool-manage">
					管理
				</view>
			</view>
		</view>
		<!-- 购物栏 -->
		<view class="cart-box">
			<!-- 上方条 -->
			<view class="cart-box-tool">
				<view class="cart-tool-btn" v-for="item of cartToolArr" :key="item.tid">
					<view class="cart-tool-btn-pic">
						<image class="cart-tool-btn-pic-size" :src="item.pic" mode=""></image>
					</view>
					<view class="cart-tool-btn-text">
						{{item.text}}
					</view>
				</view>
				<view class="cart-tool-btn-file">
					<image class="cart-tool-btn-file-pic" src="../../static/pic/cart/file.png" mode=""></image>
				</view>
			</view>
			<!-- 购物车内容 -->
			<view class="cart-box-content">
				<view class="cart-content-item dif-seller-item" v-for="(item,index) of cartArr" :key="item.gid">
					<!-- 选择器  checkbox -->
					<view class="cart-content-item-checkbox">
						<view class="cart-content-item-checkbox-box" :class="item.selected?'active':''"
							@click="changeActive(index)">

						</view>
					</view>
					<image class="cart-content-item-pic" :src="item.pic" mode="" @click="toGoodsDetail(item.gid)"></image>
					<view class="cart-content-item-message" @click="toGoodsDetail(item.gid)">
						<!-- 标题/数量 -->
						<view class="cart-content-item-msg-top">
							<view class="cart-content-item-msg-top-title">
								{{setFontleng(item.title)}}
							</view>
							<view class="cart-content-item-msg-top-num">
								×1
							</view>
						</view>
						<!-- 中间 -->
						<view class="cart-content-item-msg-mid">
							假一赔四·急速退款·7天无理由退款
						</view>
						<!-- 底部 -->
						<view class="cart-content-item-msg-btm">
							<view class="cart-content-item-msg-btm-price">
								<view class="cart-content-item-msg-btm-danwei">
									￥
								</view>
								{{item.price}}
							</view>
							<view class="cart-content-item-msg-btm-tip">
								价格波动
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 结算栏 -->
		<view class="select-payment">
			<!-- 全选 -->
			<view class="select-box">
				<view class="select-all" :class="active?'active':''" @click="selectAll">
				</view>
				<view @click="selectAll" class="select-text">
					全选
				</view>
			</view>
			<!-- 右侧 合计/结算 -->
			<view class="right-box">
				合计:
				<view class="price-danwei">
					￥
				</view>
				<view class="price">
					{{selectPrice}}
				</view>
				<view class="pay-btn">
					结算
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: false,
				selectPrice: 0,
				cartToolArr: [{
					tid: 'gsdaovba213124',
					text: "降价",
					pic: "../../static/pic/cart/go-down.png"
				}, {
					tid: 'gdsadczx215',
					text: "常购",
					pic: "../../static/pic/cart/cart-star.png"
				}, {
					tid: 'hf45277949',
					text: "奢品",
					pic: "../../static/pic/cart/gift.png"
				}, ],
				cartArr: [{
						gid: '321314151',
						type: '1',
						title: "阿迪达斯三叶草凉鞋厨具",
						price: 210,
						buyCount: 510,
						info: 1,
						pic: '../../static/image/shangping/zkas5jgo.png',
						selected: false
					}, {
						gid: '41234871',
						type: '1',
						title: "外星人游戏本笔记本电脑x16 R2 Ultra RTX4060电竞玩家高考学生电脑办公学习设计师【2024新品】",
						price: 3400,
						buyCount: 5100,
						info: 5,
						pic: '../../static/image/shangping/y22tunwn.png',
						selected: false
					},
					{
						gid: '625421',
						type: '1',
						title: "耐克T恤男子OVERSIZE风短袖上衣夏季宽松FB8166",
						price: 1200,
						buyCount: 10010,
						info: 4,
						pic: '../../static/image/shangping/wivlmauo.png',
						selected: false
					}, {
						gid: '6377388211',
						type: '1',
						title: "官方耐克乔丹AJ1板鞋男运动鞋秋季新款低帮缓震轻便HM3711 ",
						price: 160,
						buyCount: 130,
						info: 2,
						pic: '../../static/image/shangping/5uku5aoq.png',
						selected: false
					},
					{
						gid: '123121151',
						type: '1',
						title: "上海迪士尼玲娜贝儿",
						price: 20,
						buyCount: 1510,
						info: 3,
						pic: '../../static/image/shangping/4wc2wtut.png',
						selected: false
					}, {
						gid: '5611234v344',
						type: '1',
						title: "爱马仕包包",
						price: 54000,
						buyCount: 120,
						info: 2,
						pic: '../../static/image/shangping/qp4059d3.png',
						selected: false
					}
				],

			};
		},
		methods: {
			changeActive(num) {
				this.cartArr[num].selected = !this.cartArr[num].selected
				if (this.cartArr[num].selected) this.selectPrice += this.cartArr[num].price
				else this.selectPrice -= this.cartArr[num].price
			},
			selectAll() {
				this.active = !this.active
				let total = 0;
				this.cartArr.map(data => {
					data.selected = this.active
					total += data.price
				})
				if (this.active) this.selectPrice = total
				else this.selectPrice = 0
			},
			setFontleng(str) {
				let len = str.length;
				if (len > 25) return str.slice(0, 25) + '...'
				else return str
			},
			toGoodsDetail(goods_id) {
				uni.navigateTo({
					url: "/subpkg/goods-detail/goods-detail?goods_id=" + goods_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: linear-gradient(rgb(240, 230, 221), rgb(228, 222, 224), #fff 10%, rgb(228, 222, 224) 30%, rgb(228, 222, 224));
	}

	.big-box {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.top-box {
		width: 96%;
		height: 80rpx;
		padding: 2%;
		padding-bottom: 0;
		display: flex;
		align-items: center;

		.top-box-title {
			display: flex;
			align-items: center;
			font-size: 50rpx;
			font-weight: 600;
			width: 30%;

			.goods-num {
				font-size: 26rpx;
			}
		}

		.address {
			display: flex;
			font-size: 28rpx;
			width: 50%;

			.address-eye {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;

				.address-eye-pic {
					width: 100%;
					height: 100%;
				}
			}

			.address-info {
				display: flex;
				letter-spacing: 1rpx;
				color: rgb(131, 131, 131);

				.address-info-more {
					margin-left: 20rpx;
				}
			}
		}

		.top-box-tool {
			display: flex;
			justify-content: space-between;
			width: 20%;

			.top-box-tool-search {
				height: 50rpx;
				width: 50rpx;
				cursor: pointer;

				.top-box-tool-search-pic {
					width: 100%;
					height: 100%;
				}
			}

			.top-box-tool-manage {
				font-size: 36rpx;
				cursor: pointer;
			}
		}


	}

	.cart-box {
		width: 100%;
		height: 100%;

		.cart-box-tool {
			position: relative;
			display: flex;
			align-items: center;
			height: 100rpx;
			width: 100%;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #fff;

			.cart-tool-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				height: 90rpx;
				width: 25%;
				background-color: rgb(247, 247, 247);
				font-size: 30rpx;
				margin-right: 20rpx;
				cursor: pointer;

				.cart-tool-btn-pic {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 40rpx;
					height: 40rpx;
					margin-right: 5rpx;

					.cart-tool-btn-pic-size {
						width: 100%;
						height: 100%;
					}
				}

				.cart-tool-btn-text {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.cart-tool-btn-file {
				position: absolute;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgb(247, 247, 247);
				border-radius: 90rpx;
				height: 90rpx;
				width: 90rpx;
				cursor: pointer;

				.cart-tool-btn-file-pic {
					width: 50%;
					height: 50%;
				}
			}

		}

		// 不同商家时 商品之间有间隔
		.dif-seller-item {
			border-radius: 20rpx;
		}

		.cart-box-content {
			display: flex;
			flex-direction: column;
			width: 96%;
			margin: 0 2%;

			.cart-content-item {
				width: 100%;
				height: 210rpx;
				display: flex;
				align-items: center;
				flex-direction: row;
				margin-bottom: 10rpx;
				background-color: #fff;
				cursor: pointer;

				.cart-content-item-checkbox {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 8%;
					margin-left: 2%;

					.cart-content-item-checkbox-box {
						width: 40rpx;
						height: 40rpx;
						border-radius: 40rpx;
						border: 2rpx solid #c6c6c6;
						cursor: pointer;
					}

					.active {
						background-color: rgb(246, 98, 31);
						position: relative;
					}

					.active::after {
						position: absolute;
						top: 8rpx;
						right: 14rpx;
						transform: translate(50%, 50%);
						content: "";
						width: 10rpx;
						height: 20rpx;
						border-right: 2rpx solid rgb(255, 255, 255);
						border-bottom: 2rpx solid rgb(255, 255, 255);
						transform: rotate(45deg);
						/* 添加过渡 */
						transition: all .4s;
					}
				}

				.cart-content-item-pic {
					display: flex;
					align-items: center;
					justify-content: center;
					object-fit: cover;
					width: 180rpx;
					height: 180rpx;
					margin: 0 2%;
					border-radius: 20rpx;
					background-color: rgb(250, 250, 250);
				}

				.cart-content-item-message {
					display: flex;
					flex-direction: column;
					height: 90%;
					width: 59%;
					padding: 10% 0;
					padding-right: 2%;

					.cart-content-item-msg-top {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;

						.cart-content-item-msg-top-title {
							font-weight: 600;
							letter-spacing: 1rpx;
							cursor: pointer;
						}

						.cart-content-item-msg-top-num {
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 4rpx;
							border-radius: 10rpx;
							border: 2rpx solid #e7e7e7;
							cursor: pointer;
						}
					}

					.cart-content-item-msg-mid {
						flex: 1;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: rgb(238, 86, 35)
					}

					.cart-content-item-msg-btm {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.cart-content-item-msg-btm-price {
							display: flex;
							align-items: flex-end;
							color: rgb(250, 37, 71);
							font-size: 36rpx;
							font-weight: 600;

							.cart-content-item-msg-btm-danwei {
								font-size: 26rpx;
							}
						}

						.cart-content-item-msg-btm-tip {
							position: relative;
							display: flex;
							align-items: center;
							margin-right: 20rpx;
							font-size: 28rpx;
							color: rgb(100, 100, 100);
							cursor: pointer;
						}

						.cart-content-item-msg-btm-tip::after {
							position: absolute;
							top: 14rpx;
							right: -16rpx;
							content: "";
							width: 10rpx;
							height: 10rpx;
							border-right: 2rpx solid rgb(100, 100, 100);
							border-bottom: 2rpx solid rgb(100, 100, 100);
							transform: rotate(-45deg);
							/* 添加过渡 */
							transition: all .4s;
						}
					}
				}
			}

			.cart-content-item:nth-child(1) {
				margin-top: 10rpx;
			}
		}
	}

	.select-payment {
		position: sticky;
		bottom: 100rpx;
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.select-box {
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			color: #c6c6c6;
			font-size: 34rpx;

			.select-all {
				width: 46rpx;
				height: 46rpx;
				border-radius: 46rpx;
				border: 2rpx solid #c6c6c6;
				cursor: pointer;
				margin-right: 10rpx;
			}

			.select-text {
				cursor: pointer;
			}

			.active {
				background-color: rgb(246, 98, 31);
				position: relative;
			}

			.active::after {
				position: absolute;
				top: 8rpx;
				right: 16rpx;
				transform: translate(50%, 50%);
				content: "";
				width: 12rpx;
				height: 24rpx;
				border-right: 2rpx solid rgb(255, 255, 255);
				border-bottom: 2rpx solid rgb(255, 255, 255);
				transform: rotate(45deg);
				/* 添加过渡 */
				transition: all .4s;
			}
		}

		.right-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 34rpx;

			.price-danwei {
				display: flex;
				color: rgb(247, 83, 58);
			}

			.price {
				display: flex;
				font-size: 50rpx;
				color: rgb(247, 83, 58);
				padding-bottom: 14rpx;
				font-weight: 600;
			}

			.pay-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 20rpx;
				color: #fff;
				width: 200rpx;
				height: 80rpx;
				border-radius: 80rpx;
				font-size: 36rpx;
				background: linear-gradient(to right, rgb(249, 142, 44), rgb(250, 87, 34));
				cursor: pointer;
			}
		}
	}
</style>